<template>
  <div class="index">
    <Segel
      v-bind:resources="resources"
      v-bind:bookings="bookings"
      v-on:bookings-create="handleCreate"
      v-on:bookings-update="handleUpdate"
      v-on:bookings-delete="handleDelete"
    ></Segel>
  </div>
</template>
<script setup lang="ts">
  import Segel from 'segel';
  import { ref, inject } from 'vue';
  // const dayjs = inject('dayjs');
  const resources = ref([{ id: 1, name: 'Conference Room A' }]);
  const bookings = ref([
    {
      id: 1,
      resource: 1,
      start: "2023-03-20",
      end: "2023-03-21",
    },
    {
      id: 2,
      resource: 1,
      start: "2023-03-22",
      end: "2023-03-23",
    },
    {
      id: 3,
      resource: 1,
      start: "2023-03-24",
      end: "2023-03-25",
    },
  ]);
  const bookingID = ref(10);
  const handleCreate = (booking) => {
    // Give booking a unique ID and append to array.
    booking.id = ++bookingID.value;
    bookings.value.push(booking);
  };
  const handleUpdate = (booking) => {
    // Find index of updated booking.
    let index = bookings.value.findIndex(function (stored) {
      return stored.id == booking.id;
    });

    bookings.value.splice(index, 1, booking);
  };
  const handleDelete = (booking) => {
    // Find index of deleted booking.
    let index = bookings.value.findIndex(function (stored) {
      return stored.id == booking.id;
    });

    // Remove booking from array.
    bookings.value.splice(index, 1);
  };
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
